<script setup>
import {
  Edit,
  Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const UserModel = ref({
  name: '',
  dormitoryId: '',
  categoryName: ''
  /* createTime: '',
  updateTime:'', */
})

const categorys = ref([
  {
    "categoryName": '',
    "categoryPrice": ''
  }
])

import { dormitoryCategoryListService } from '@/api/Dormitory.js'
const dormitoryCategory = async () => {
  let result = await dormitoryCategoryListService()
  categorys.value = result.data;
}
dormitoryCategory();

const dormitorys = ref([
  {
    "id": 1,
    "dormitoryId": "801",
    "categoryId": 2,
    "createUser": 1,
    "createTime": "2024-07-31 14:44:19",
    "updateTime": "2024-07-31 14:50:22"
  }
])

import { listDormitoryService } from '@/api/Dormitory.js'
const dormitoryList = async () => {
  let result = await listDormitoryService();
  dormitorys.value = result.data;
}
dormitoryList();

//用户搜索时选中的宿舍
const dormitoryId = ref('')

//用户搜索时选中的姓名
const name = ref('')

//用户搜索时选中的分类
const categoryName = ref('')

//学生列表数据模型
const User = ref([
  {
    id: '',
    name: '',
    dormitoryId: '',
    categoryName: '',
    createTime: '',
    updateTime: ''
  }
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  getUserInfo();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  getUserInfo();
}

import { getUserInfoService } from '@/api/User.js'
const getUserInfo = async () => {
  let params = {
    pageNum: pageNum.value,//当前页
    pageSize: pageSize.value,//每页条数
    name: name.value ? name.value : null,//搜索关键字
    dormitoryId: dormitoryId.value ? dormitoryId.value : null,
    categoryName: categoryName.value ? categoryName.value : null
  }
  let result = await getUserInfoService(params);
  User.value = result.data.items;
  total.value = result.data.total;
}
dormitoryList();
getUserInfo();

const title = ref('');

import { addUserService } from '@/api/User.js'
import { ElMessage } from 'element-plus'
const addUser = async () => {
  let result = await addUserService(UserModel.value);
  ElMessage.success(result.message ? result.message : '添加成功');

  getUserInfo();

  visibleDrawer.value = false
}

import { updateUserService } from '@/api/User.js'
const updateUser = async () => {
  let result = await updateUserService(UserModel.value);
  ElMessage.success(result.message ? result.message : '修改成功');
  getUserInfo();
  visibleDrawer.value = false
}
const showUserInfo = (row) => {
  title.value = '修改学生'
  visibleDrawer.value = true
  UserModel.value = row
}

import { deleteUserService } from '@/api/User.js'
import { ElMessageBox } from 'element-plus'
const deleteUser = async (row) => {
  ElMessageBox.confirm(
    '你确认要删除这条学生信息吗？',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      //调用接口
      let result = await deleteUserService(row.id);

      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      //刷新列表
      getUserInfo();
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}

import { useRouter } from 'vue-router';
import {findStuInfoService} from '@/api/StuInfo.js'
const router = useRouter()
import {UseStuInfoStore} from '@/stores/stuInfo.js'
const StuInfo = UseStuInfoStore();
const jump = async(row)=>{
  /* let params = {
    pageNum : pageNum.value,
    pageSize : pageSize.value,
    name : row.name
  }
  let result = await findStuInfoService(params); */
  StuInfo.setInfo(row.name);
  router.push('/Stu/Info')
}

</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>学生管理</span>
        <div class="extra">
          <el-button type="primary" @click="visibleDrawer = true; title = '添加学生'">添加学生</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="学生姓名：">
        <!-- <el-select placeholder="请选择" v-model="categoryId">
          <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
          </el-option>
        </el-select> -->
        <el-input v-model="name" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item label="宿舍号：">
        <el-select placeholder="请选择" v-model="dormitoryId" style="width: 200px">
          <el-option v-for="c in dormitorys" :key="c.id" :label="c.dormitoryId" :value="c.dormitoryId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="宿舍分类：">
        <el-select placeholder="请选择" v-model="categoryName" style="width: 200px">
          <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.categoryName">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getUserInfo">搜索</el-button>
        <el-button @click="name = '',dormitoryId = '',categoryName = ''">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 学生列表 -->
    <el-table :data="User" style="width: 100%">
      <el-table-column label="学生编号" prop="id"></el-table-column>
      <el-table-column label="学生姓名" prop="name"></el-table-column>
      <el-table-column label="学生宿舍" prop="dormitoryId"> </el-table-column>

      <el-table-column label="查询学生信息">
        <template #default="{ row }">
          <el-button :icon = "prompt" circle plain type="primary" @click="jump(row)"></el-button>
        </template>
        
      </el-table-column>


      <el-table-column label="宿舍分类" prop="categoryName"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showUserInfo(row)"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="deleteUser(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  </el-card>

  <!-- 抽屉 -->
  <el-drawer v-model="visibleDrawer" title="添加学生" direction="rtl" size="50%">
    <!-- 添加表单 -->
    <el-form :model="UserModel" label-width="100px">
      <el-form-item label="学生姓名">
        <el-input v-model="UserModel.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="学生宿舍">
        <el-select placeholder="请选择" v-model="UserModel.dormitoryId">
          <el-option v-for="c in dormitorys" :key="c.id" :label="c.dormitoryId" :value="c.dormitoryId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="宿舍分类">
        <el-select placeholder="请选择" v-model="UserModel.categoryName">
          <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.categoryName">
          </el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" @click="title == '添加学生' ? addUser() : updateUser()">确定</el-button>
      <el-button type="info" @click="visibleDrawer = false">取消</el-button>
    </el-form>
  </el-drawer>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* 抽屉样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>